<template>
	<a-modal title="编辑" :width="500" :visible="visible" :body-style="{ paddingBottom: '80px' }"
		:footer-style="{ textAlign: 'right' }" @ok="handleOk" @cancel="handleClose">
		<a-form :model="senceForm" layout="vertical">
			<a-form-item label="场景名称" name="sence_name">
				<a-input placeholder="请输入" v-model:value="senceForm.sence_name" />
			</a-form-item>
			<a-form-item label="场景描述" name="sence_desc">
				<a-textarea v-model:value="senceForm.sence_desc" placeholder="请输入"
					:auto-size="{ minRows: 3, maxRows: 3 }" />
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
	import {
		PlusOutlined
	} from '@ant-design/icons-vue';
	import {
		defineComponent,
		reactive,
		toRefs,
		watch,
		ref
	} from 'vue';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			senceItem: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		components: {},
		setup(props, context) {
			const state = reactive({
				senceForm: {
					sence_name: '',
					sence_desc: ''
				}
			})
			watch(() => props.senceItem, val => {
				state.senceForm.sence_name = val.name
				state.senceForm.sence_desc = val.remark
			})
			const handleClose = () => {
				context.emit('close')
			};
			const handleOk = () => {
				let obj = {}
				Object.assign(obj, state.senceForm)
				obj.index = props.senceItem.index
				context.emit('close', obj)
			}
			return {
				...toRefs(state),
				handleClose,
				handleOk
			};
		},
	});
</script>

<style lang="less" scoped>
</style>